<template>
  <div ref="faultChart" style="height: 100%; width: 70%"></div>
</template>

<script>
import { markRaw } from 'vue';
import { fnGetFaultTopo } from '@/api/osMind/fault';
import { fnIsError } from '@/components/handleError';
import { getTypeIcon } from '@/components/chartConfig';

export default {
  name: 'faultTopo',
  props: ['selectHost'],
  data() {
    return {
      chart: null,
      chartData: null,
    };
  },
  watch: {
    'selectHost.id': function (val) {
      if (!val) {
        return;
      }
      this.fnGetFaultData();
    },
  },
  mounted() {
    if (this.selectHost.id) {
      this.fnGetFaultData();
    }
  },
  methods: {
    async fnGetFaultData() {
      const param = {
        timestamp: this.selectHost.time,
        machine_id: this.selectHost.machine_id,
      };
      const { data } = await fnGetFaultTopo(param);
      if (fnIsError(data.code)) {
        return;
      }
      this.fnFormatChartData(data.data);
    },
    fnFormatChartData(data) {
      const chartData = {};
      chartData.links = data.link.map((item) => {
        return {
          source: item.from,
          target: item.to,
        };
      });
      chartData.data = data.entities.map((item) => {
        if (!item.key) {
          return;
        }
        item.symbol = `image://${getTypeIcon(item.type).normal}`;
        item.id = item.key;

        return item;
      });
      data.event.forEach((e) => {
        const item = {
          name: e.event,
          symbol: `image://${getTypeIcon('abnormal')}`,
          id: e.event_id + e.event,
          ...e,
          type: 'event',
        };
        if (item.event_id === this.selectHost.event_id) {
          item.symbolSize = 50;
          item.itemStyle = {
            shadowColor: '#fff',
            shadowBlur: 20,
          };
        }
        chartData.data.push(item);
        chartData.links.push({
          source: e.event_id,
          target: item.id,
        });
      });
      this.chartData = chartData;
      this.fnDrawChart();
    },
    fnDrawChart() {
      if (!this.chart) {
        this.chart = markRaw(this.$echarts.init(this.$refs.faultChart));
      }
      const option = {
        title: {
          show: this.chartData.data.length === 0,
          textStyle: {
            color: '#ccc',
            fontsize: 20,
          },
          text: this.$t('common.noData'),
          left: 'center',
          top: 'center',
        },
        tooltip: {
          confine: true,
          formatter(param) {
            if (!param.data.type) {
              // 线
              return '';
            }
            if (param.data.type === 'event') {
              return `<div>${this.$t('faultDiagnosis.abnormalEvent')}: ${param.data.name}</div>
                      <div>${this.$t('faultDiagnosis.eventDesc')}: ${param.data.description}</div>`;
            }
            return `<div>名称: ${param.data.name}</div>
                    <div>类型： ${param.data.type}</div>`;
          },
        },
        series: [
          {
            roam: true,
            type: 'graph',
            layout: 'force',
            symbolSize: 30,
            force: {
              edgeLength: [50, 200],
              repulsion: 300,
            },
            emphasis: {
              focus: 'adjacency',
              label: {
                show: true,
              },
            },
            data: this.chartData.data,
            links: this.chartData.links,
            label: {
              show: true,
              position: 'bottom',
              color: '#fff',
              formatter(param) {
                if (param.name.length < 20) {
                  return param.name;
                }
                return `${param.name.slice(0, 20)}...`;
              },
            },
          },
        ],
      };
      this.chart.setOption(option, true);
      this.chart.resize();
    },
    fnResize() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped></style>
